<template>
  <div class="contend examinationContend subjectOFContend">
    <div class="container">
      <!-- 车型选择区 -->
      <section class="chooseCarType">
        <div class="topTitleTab">
          <span>当前位置：首页 > 模拟考试 > {{ subText }}</span>
        </div>
        <div class="cartypeCon">
          <div class="left">
            <div class="typeTitle">
              <span>车型选择</span>
            </div>
            <ul class="typesBox">
              <li
                v-for="(typeItem, i) in carTypeList"
                :key="i"
                :class="
                  typeindex == i ? 'typeItem active curp' : 'typeItem curp'
                "
                @click="changeType(i, typeItem)"
              >
                {{ typeItem.name }}
              </li>
            </ul>
          </div>
          <div class="right">
            <div class="subtitle">
              <span
                :class="[titleItem.sub == sub && category!=5 && !isZgz? 'curp active' : 'curp',titleItem.sub == categorysub && isZgz? 'curp active' : 'curp']"
                v-for="(titleItem, i) in typeTitle"
                :key="i"
                @click="changeTitleType(i, titleItem)"
                >{{ titleItem.title }}</span
              >
            </div>
            <div class="itemBox">
              <div class="item" v-for="(item, i) in itemList" :key="i">
                <img :src="item.imgurl" alt="" />
                <nuxt-link
                  :to="{
                    name: item.linkurl,
                    query: { sub: sub, type: item.title,group:group, category: category,categorysub:categorysub,difficulty:item.difficulty,random: item.random,},
                  }"
                  class="title curp"
                >
                  <span>{{ item.title }}</span>
                </nuxt-link>
                <span class="tips">{{ item.tips }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="lookBook">
        <div class="lookBook_left" v-if="sub == 1">
          <div class="look_top">
            <span class="title">科目一交通标志</span>
            <span class="more">
              <nuxt-link to="/signs">更多</nuxt-link>
            </span>
          </div>

          <div class="look_bot">
            <div
              :class="(i + 1) % 3 != 0 ? 'signItem mr' : 'signItem mr'"
              v-for="(signItem, i) in signList"
              :key="i"
            >
              <!-- <img src="~/assets/images/a.jpg" alt="" /> -->
              <nuxt-link :to="{ name: 'signs', query: { cuIdx: i } }">
                <span>{{ signItem.title }}</span>
              </nuxt-link>
            </div>
          </div>
        </div>
        <div class="lookBook_left" v-if="sub == 4">
          <!-- 展示区 -->
          <section class="tipsBox">
            <span class="title">{{ subText }}</span>
            <span class="tips"
              >科目四，又称科目四理论考试、驾驶员理论考试，是机动车驾驶证考核的一部分。公安部123号令实施后，科目三考试分为两项内容，除了路考，增加了安全文明驾驶考试，俗称“科目四”，考量“车德”。因为这个考试在科目三之后进行，所以大家都习惯称之为科目四考试。实际的官方说法中没有科目四一说。</span
            >
          </section>
        </div>
        <div class="lookBook_right">
          <div class="left_imgBox">
            <img src="~/assets/images/a.jpg" alt="" />
          </div>
          <a :href="url" target="_blank">
            <div class="right_textBox">
              <span class="title">考试预约</span>
              <span class="tips"
                >{{ city ? city.title : "" }}{{ subText }}在线考试预约入口</span
              >
            </div>
          </a>
        </div>
      </section>
      <!-- 展示区 -->
      <section class="tipsBox" v-if="sub == 1">
        <span class="title">2021小车科目一考试</span>
        <span class="tips"
          >科目一，又称科目一理论考试、驾驶员理论考试，是机动车驾驶证考核的一部分
          。根据《机动车驾驶证申领和使用规定》，考试内容包括驾车理论基础、道路安全法律法
          规、地方性法规等相关知识。考试形式为上机考试，100道题，90分及以上过关。</span
        >
      </section>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import drivingSchool from "@/components/drivingSchool.vue";
import { appointmentwebsite } from "~/api/commen";
import { trafficsignOption } from "~/api/signs.js";
export default {
  components: { drivingSchool },
  data() {
    return {
      typeTitle: [
        { title: "科目一交规", sub: 1 },
        { title: "科目四安全文明驾驶", sub: 4 },
      ],
      carTypeList: [
        { name: "小车", category: 1 },
        { name: "货车", category: 2 },
        { name: "客车", category: 3 },
        { name: "摩托车", category: 4 },
        { name: "资格证", category: 5 },
      ],
      itemList: [
        {
          title: "顺序练习",
          tips: "按顺序练习做题",
          imgurl: require("~/assets/images/caytypr0.png"),
          linkurl: "examination-questions",
        },
        {
          title: "随机练习",
          tips: "按随机顺序做题",
          imgurl: require("~/assets/images/caytypr1.png"),
          linkurl: "examination-questions",
          random: 1,
        },
        {
          title: "专项练习",
          tips: "分门别类重点突破",
          imgurl: require("~/assets/images/caytypr2.png"),
          linkurl: "examination-exercises",
        },
        {
          title: "章节练习",
          tips: "按照法规章节逐步分类",
          imgurl: require("~/assets/images/caytypr3.png"),
          linkurl: "examination-chapter",
        },
        {
          title: "难点攻克",
          tips: "准确把握考试难点",
          imgurl: require("~/assets/images/caytypr4.png"),
          linkurl: "examination-questions",
          difficulty:1
        },
        {
          title: "模拟考试",
          tips: "2021新题库",
          imgurl: require("~/assets/images/caytypr5.png"),
          linkurl: "examination-practice",
        },
      ],
      contendList: [
        { title: "第一章", details: "道路交通安全法律、法规和规章" },
        { title: "第一章", details: "道路交通安全法律、法规和规章" },
        { title: "第一章", details: "道路交通安全法律、法规和规章" },
        { title: "第一章", details: "道路交通安全法律、法规和规章" },
        { title: "第一章", details: "道路交通安全法律、法规和规章" },
        { title: "第一章", details: "道路交通安全法律、法规和规章" },
      ],

      category: 1,
      typeindex: 0,
      categorysub:1,
      group:1,
      isZgz:false,
    };
  },
  watchQuery: ["sub"],
  async asyncData({ app, query, params }) {
    let sub = query.sub;
    let group = query.group;
    let subText,titleIndex;
    if (sub == 1) {
      subText = "科目一";
      titleIndex=0
    } else if (sub == 4) {
      subText = "科目四";
        titleIndex=1
    }
    let url = await appointmentwebsite();
    let optionList = await trafficsignOption();

    return {
      sub: sub,
      subText: subText,
      url: url.url,
      signList: optionList,
      titleIndex:titleIndex,
      group:group,
    };
  },
  methods: {
    changeType(i, typeItem) {
      this.typeindex = i;
      this.category=typeItem.category

      if (this.category == 5) {
        this.typeTitle = [
          { title: "客运资格证", sub: 1 },
          { title: "货运资格证", sub: 2 },
          { title: "危险品格证", sub: 3 },
          { title: "教练员格证", sub: 4 },
          { title: "出租车资格证", sub: 5 },
          { title: "网约车资格证", sub: 6 },
        ];
        this.categorysub=this.typeTitle[0].sub
        this.group=2
       this.category = this.categorysub;
        this.isZgz=true;
      } else {
           this.group=1
            this.isZgz=false;
             this.categorysub=1
        this.typeTitle = [
          { title: "科目一交规", sub: 1 },
          { title: "科目四安全文明驾驶", sub: 4 },
        ];
      }
    },
    changeTitleType(i, titleItem) {
      this.categorysub=titleItem.sub
      // console.log(this.isZgz,this.categorysub,this.category)
      if (this.isZgz) {
        this.category = this.categorysub;
      } else {
        this.sub = titleItem.sub;
        if (titleItem.sub == 1) {
          this.subText = "科目一";
        } else {
          this.subText = "科目四";
        }
        let name = this.$route.name;
        let query = { ...this.$route.query };
        query.sub = this.sub;
        this.$router.replace({ name: name, query: query });
      }
    },
  },
  computed: {
    ...mapState("navList", ["city"]),
  },
  mounted() {},
  watch:{
    categorysub(val){
      console.log(val)
    }
  }
};
</script>

<style scoped lang='scss'>
@import "~/assets/css/examination.scss";
@import "~/assets/css/subjectOF.scss";
</style>